<template>
    <div class="local-music">
        <div class="section-header">
            <h2>本地音乐</h2>
            <el-button type="primary" icon="el-icon-folder" @click="$emit('open-dir')" :loading="loading">
                选择目录
            </el-button>
        </div>

        <div v-if="musicList.length === 0" class="empty-state">
            <i class="el-icon-folder-opened"></i>
            <p>还没有添加音乐，请选择音乐文件夹</p>
        </div>

        <div v-else class="music-list">
            <div class="list-header">
                <div class="header-item">歌曲</div>
                <div class="header-item">歌手</div>
                <div class="header-item">专辑</div>
                <div class="header-item">时长</div>
            </div>

            <div v-for="(music, index) in musicList" :key="index" class="music-item"
                :class="{ active: currentIndex === index }" @click="$emit('play', index)">
                <div class="item-title">
                    <i class="el-icon-video-play" v-if="currentIndex === index"></i>
                    {{ music.title || music.name }}
                </div>
                <div class="item-artist">{{ music.artist || '未知歌手' }}</div>
                <div class="item-album">本地音乐</div>
                <div class="item-duration">{{ formatTime(music.duration) }}</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'LocalMusic',
    props: {
        musicList: {
            type: Array,
            default: () => []
        },
        currentIndex: {
            type: Number,
            default: -1
        }
    },
    data() {
        return {
            loading: false
        };
    },
    methods: {
        formatTime(seconds) {
            const mins = Math.floor(seconds / 60).toString().padStart(2, '0');
            const secs = Math.floor(seconds % 60).toString().padStart(2, '0');
            return `${mins}:${secs}`;
        }
    }
};
</script>

<style lang="scss" scoped>
.local-music {
    background-color: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;

        h2 {
            margin: 0;
            font-size: 18px;
            color: #333;
        }
    }

    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 200px;
        color: #999;

        i {
            font-size: 48px;
            margin-bottom: 16px;
        }

        p {
            font-size: 14px;
        }
    }

    .music-list {
        border: 1px solid #eee;
        border-radius: 4px;
        overflow: hidden;

        .list-header {
            display: grid;
            grid-template-columns: 4fr 2fr 2fr 1fr;
            background-color: #f9f9f9;
            padding: 10px 15px;
            font-size: 13px;
            color: #999;
            border-bottom: 1px solid #eee;
        }

        .music-item {
            display: grid;
            grid-template-columns: 4fr 2fr 2fr 1fr;
            padding: 10px 15px;
            border-bottom: 1px solid #f5f5f5;
            cursor: pointer;
            transition: background 0.2s;

            &:hover {
                background-color: #f9f9f9;
            }

            &.active {
                background-color: #f0f7ff;
                color: #409eff;

                .item-title {
                    color: #409eff;
                }
            }

            .item-title {
                display: flex;
                align-items: center;
                font-weight: 500;

                i {
                    margin-right: 8px;
                }
            }
        }
    }
}
</style>